<template>
	<view>
		<view class="Ceiling">
			<my-search @myclick="setsearch"></my-search>
		</view>
	<swiper :autoplay='true' :circular='true' :indicator-dots="true" :interval="4000" :duration="1000" indicator-active-color="red" indicator-color="#fff">
		<swiper-item v-for="(item,index) in RotationList" :key="item.id">
			<navigator :url="'/subpkg/goods_detail/goods_detail?goos_id='+item.goods_id">
				<image mode="widthFix" :src="item.image_src"></image>
			</navigator>
			</swiper-item>
	</swiper>
	<!-- 导航菜单 -->
	<view class="nav">
		<view class="nav-item" @click="setpath(item.name)" v-for="(item,index) in NavList" :key="index"><image mode="widthFix" :src="item.image_src"></image></view>
	</view>
	<!-- 楼层项 -->
	<view class="floor">
		<view  v-for="(item,index) in floorList" :key='index'><image class="floor-item" :src="item.floor_title.image_src"></image>
		<!-- 楼层内容 -->
		<view class="floor_Max">
			<navigator class="floor_left" :url="item.product_list[0].url">
				<image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix" ></image>	
			</navigator>
			<view class="floor_right">
				<navigator :url="item2.url" v-for="(item2,i2) in item.product_list" :key='i2' v-if="i2!==0" class="floor_right_item">
					<image :src="item2.image_src" :style="{width:item2.image_width+'rpx'}" mode="widthFix"></image>
				</navigator>
			</view>
		</view>
		</view>
	</view>
	</view>
</template>

<script>
	import tabbar from'../../mixins/tabbar.js'
	export default {
		mixins:[tabbar],
		data() {
			return {
			RotationList:[],//轮播图
			NavList:[],//导航栏
			floorList:[]//楼层
			};
		},
		onLoad(){
			this.getRotationList();
			this.getNavList();
			this.getfloorList();
		},
		methods:{
			setsearch(){
				uni.navigateTo({
					url:'../../subpkg/search/search'
				})
			},
			// 跳转对应的页面
			setpath(path){
				if(path=='分类'){
				uni.switchTab({
					url:"/pages/classification/classification"
				})
			}
			},
			getRotationList(){//轮播图
				uni.$http.get('/api/public/v1/home/swiperdata').then(res=>{
					this.RotationList=res.data.message;
				}).catch(err=>{
						uni.$showMeg()
				})
			},
			getNavList(){//导航栏
				uni.$http.get('/api/public/v1/home/catitems').then(res=>{
					this.NavList=res.data.message;
				}).catch(err=>{
						uni.$showMeg()
				})
			},
			getfloorList(){//楼层
				uni.$http.get('/api/public/v1/home/floordata').then(res=>{
					res.data.message.forEach(flor=>{
						flor.product_list.forEach(prod=>{
							prod.url='/subpkg/goods_list/goods_list?'+prod.navigator_url.split('?')[1]
						})
					})
					this.floorList=res.data.message;
				}).catch(err=>{
						uni.$showMeg()
				})
			}
		}
	}
</script>

<style lang="scss">
swiper{
	height: 300rpx;
	swiper-item,image{
		width: 100%;
		height:100%
	}
}
.nav{
	margin: 15px 0;
	display:flex;justify-content:space-around;

	image{width:128rpx;height: 140rpx;}
}

.floor-item{display: flex;width:100%;height:68rpx;margin:10rpx 0;}
.floor_Max{display:flex;}
.floor_left{padding-left:10rpx}
.floor_right{display: flex;flex-wrap:wrap;justify-content: space-around;}
.Ceiling{position:sticky;top:0;z-index: 999;}
</style>
